<template>
	<view class="notice-detail">
		<!-- 标题 -->
		<view class="title">{{ noticeDetail.title }}</view>

		<!-- 图片轮播 -->
		<view class="image-swiper" v-if="noticeDetail.images && imageArray.length">
			<swiper indicator-dots autoplay circular interval="5000" duration="500" indicator-color="#ccc"
				indicator-active-color="#333">
				<swiper-item v-for="(img, index) in imageArray" :key="index">
					<image :src="img" mode="widthFix" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 内容 -->
		<view class="content">{{ noticeDetail.text }}</view>
	</view>
</template>

<script>
	import {
		getNoticeById
	} from '@/api/Notice.js'
	export default {
		data() {
			return {
				noticeDetail: {}, // 存储通知详情数据
				imageArray: [] // 存储图片数组
			}
		},
		onLoad(options) {
			const noticeId = options.noticeId
			console.log('传来的noticeId是：', noticeId)

			getNoticeById(noticeId)
				.then(response => {
					console.log('通知详情数据：', response)
					this.noticeDetail = response

					// 处理图片字符串为数组
					if (response.images) {
						this.imageArray = response.images.split(',')
					}
				})
				.catch(error => {
					console.error('获取通知详情失败：', error)
				})
		}
	}
</script>

<style scoped>
	.notice-detail {
		padding: 20rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		line-height: 1.5;
	}

	.image-swiper {
		width: 100%;
		margin-bottom: 30rpx;
	}

	.swiper {
		width: 100%;
	}

	.swiper-image {
		width: 100%;
		border-radius: 10rpx;
	}

	.content {
		font-size: 30rpx;
		line-height: 1.8;
		color: #333;
		padding: 10rpx 0;
		text-align: justify;
	}
</style>